<template>
    <div class="poa loginbody">
        <div @click="quit" class="cuo">
            <div></div>
            <div></div>
        </div>
        <div class="login_body_content">
            <div class="login_body_content_title">
                注册即可登录
            </div>
            <input_ @error="email_error" @input="email_input" :text="'输入邮箱'" :rules="'required|email'" />
            <input_ @error="password_error" @input="password_input" :text="'设置密码'" :rules="'required|minLength:6'" />
            <div class="code_big">
                <input_ @error="code_error" @input="code_input" :text="'输入验证码'" :rules="'required|minLength:6'" />
                <button ref="login_btn" v-disabled @click="get_code" class="get_code">获取验证码</button>
            </div>
            <div class="login_submit">
                <button @click="login_submit" v-botton class="login_btn">注册账号</button>
            </div>
            <MyMessage v-model:flag="alert_flag" :text="error_text" />
        </div>
    </div>
</template>
<script setup>
import { defineEmits, ref, reactive, defineAsyncComponent } from 'vue';
import { getCode, enroll } from '../../api/api'
const input_ = defineAsyncComponent(() => import('../common/input_plus.vue'))
const emit = defineEmits(['quit'])
function quit() {
    emit('quit', 'enroll_succsess')
}
let login_btn = ref()
let alert_flag = ref(false)
let error_text = ref('')
let form = reactive(
    {
        email: '',
        password: '',
        code: '',
    }
)
let error = reactive(
    {
        email_error: '',
        password_error: '',
        code_error: '',
    }
)
function alertfn(text) {
    error_text.value = text
    alert_flag.value = true
    setTimeout(() => {
        alert_flag.value = false
    }, 2000)
}
function get_code() {
    getCode(`/api/common/user/getCode/${form.email}`).then(res => {
        if (res.data.code == 200) {
            alertfn('发送成功')
        } else if (res.data.code == "user:email_existed") {
            alertfn('该邮箱已注册')
        } else {
            alertfn('发送失败')
        }
    })
}
function login_submit() {
    if (!form.email || !form.password || !form.code) {
        alertfn('请填写必填项')
        return
    }
    if (error.email_error) {
        alertfn(error.email_error)
        return
    }
    if (error.password_error) {
        alertfn('密码' + error.password_error)
        return
    }
    if (error.code_error) {
        alertfn('验证码' + error.code_error)
        return
    }

    enroll(form).then(res => {
        // alertfn(res.data.message)
        console.log(res)
        if (res) {
            if (res.data.message == 'The email is registered.') {
                // if (res.data) {
                alertfn('该邮箱已注册')
                //     setTimeout(() => {
                //         emit('enroll_succsess')
                //     }, 1000)
                // }
            } else {
                alertfn('注册失败')
            }
        } else {
            alertfn('注册失败')
        }
    })
}
function disabled() {
    if (!error.email_error && !error.password_error && form.email && form.password) {
        login_btn.value.style = 'background: linear-gradient(to top left, #e8e8e8, #f8f8f8);'
        login_btn.value.disabled = false
    } else {
        login_btn.value.style = 'background: #f8f8f8;'
        login_btn.value.disabled = true
    }
}
function email_error(value) {
    error.email_error = value
    disabled()
}
function password_error(value) {
    error.password_error = value
    disabled()
}
function code_input(value) {
    form.code = value
}
function email_input(value) {
    form.email = value
}
function password_input(value) {
    form.password = value
}
function code_error(value) {
    error.code_error = value
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.get_code {
    position: absolute;
    top: r(1);
    right: r(1);
    height: r(42);
    width: r(100);
    color: #999;
    font-size: r(12);
    font-weight: bold;
    background: linear-gradient(to top left, #e8e8e8, #f8f8f8);
}

.code_big {
    position: relative;
}

.login_submit {
    width: 100%;
    height: r(44);
    position: relative;
    margin-top: r(10);

    button {
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        background-color: #fe1e4b;
        color: #ffffff00;
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: r(16);
        transition: 0.5s;
        border-radius: r(5);
        color: #fff;
        box-shadow: 0 0 r(6) #fc3058;
    }
}

.last_password {
    font-size: r(10);
    color: #999;
    text-align: right;
    margin-top: r(10);
}

.loginbody {
    padding-top: r(100);
    display: flex;
    justify-content: center;
    position: relative;
    background-color: #fff;

    .login_body_content {
        width: 70%;

        .login_body_content_title {
            text-align: center;
            width: 100%;
            font-size: r(22);
            color: #222;
            margin-bottom: r(33);
        }
    }

    .zhuche {
        position: absolute;
        right: r(20);
        top: r(17);
        font-size: r(16);
        color: #666;
    }

    .cuo {
        position: absolute;
        left: r(20);
        top: r(20);
        width: r(16);
        height: r(16);

        div {
            width: 70%;
            height: r(2);
            background-color: #666;
            position: absolute;
            top: 50%;
            left: 50%;
        }

        :nth-child(1) {
            transform: translate(-50%, 120%) rotate(30deg);
        }

        :nth-child(2) {
            transform: translate(-50%, -120%) rotate(-30deg);
        }
    }
}
</style>